<nz-layout class="app-layout">
	<nz-header>
		<div class="logo">
			<img src="./assets/logo.png">
			<span>{{meta?.application_name}}</span>
		</div>
		<ul nz-menu nzTheme="dark" nzMode="horizontal">
			<li nz-menu-item nzMatchRouter routerLink="/tasks">Tasks</li>
			<li nz-menu-item nzMatchRouter routerLink="/templates">Templates</li>
			<li nz-menu-item nzMatchRouter routerLink="/functions">Functions</li>
			<li nz-menu-item nzMatchRouter routerLink="/stats">Stats</li>
		</ul>
		<nz-button-group>
			<button type="button" nz-button nzType="primary" routerLink="/new"><i nz-icon nzType="plus"></i> New task</button>
		</nz-button-group>
		<nz-switch [ngModel]="darkThemeActive" (ngModelChange)="switchDarkTheme($event)" nzCheckedChildren="☾"
			nzUnCheckedChildren="☾"></nz-switch>
		<nz-badge [nzCount]="iconTemplate" [nzShowZero]="true" style="margin-right: 24px;">
			<nz-avatar [nzText]="meta?.username[0].toUpperCase()" [nzShape]="'square'" nzTooltipTitle="{{meta?.username}}"
				nzTooltipPlacement="bottomRight" nz-tooltip></nz-avatar>
		</nz-badge>
		<ng-template #iconTemplate>
			<i *ngIf="meta?.user_is_admin" nz-icon nzType="crown" class="ant-scroll-number-custom-component crown-badge"></i>
		</ng-template>
	</nz-header>
	<nz-content>
		<div class="content-wrapper">
			<div class="inner-content">
				<router-outlet></router-outlet>
			</div>
		</div>
	</nz-content>
</nz-layout>